<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}"/>
    <script type="text/javascript" th:src="@{/static/layui/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
    <title>我的购物车</title>
    <script th:inline="javascript">
        var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
        var shopcount = [[${shopcount}]];
    </script>
</head>
<body style="background-color:white">
<div class="layui-form" style="margin: 10px 20px 0px 20px">
    <table class="layui-table" id="allshop">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col width="200">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>主图</th>
            <th>名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>金额</th>
            <th>加入时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(shop,index) in listshop" :key="index">
            <td><div class="layer-photos-demo">
                <img :src="shop.image" alt="" @click="openimg(shop.image)" id="layer-photos-demo"></div></td>
            <td><a :href="'/product-detail/'+shop.comid" target="_blank" style="font-weight: bold">{{shop.commname}}</a></td>
            <td>￥{{shop.thinkmoney}}</td>
            <td>1</td>
            <td style="color: red;font-weight: bold">￥{{shop.thinkmoney}}</td>
            <td>{{shop.adtime}}</td>
            <td><button type="button" class="layui-btn layui-btn-sm layui-btn-normal" @click="delshop(shop.id)" >删除</button></td>
        </tr>
        </tbody>
    </table>
    <div id="demo7" style="text-align: center"></div>
</div>
</body>
<script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
<script>
    var app = new Vue({
        el: '#allshop',
        data() {
            return {
                listshop: [],
            }
        },
        mounted: function () {
            window.loolshopbypage = this.loolshopbypage;
        },
        methods: {
            loolshopbypage: function (page, count) {
                var that = this;
                $.ajax({
                    url: basePath + "/user/center/shopcar/"+page+"/"+count,
                    data: "",
                    contentType: "application/json;charset=UTF-8",
                    type: "get",
                    dataType: "json", //回调
                    success: function (data) {
                        that.listshop = data;
                        console.log(data)
                    }
                });
            },delshop:function (id) {
                $.ajax({
                    url: basePath + "/user/center/delshopcar/"+id,
                    data: "",
                    contentType: "application/json;charset=UTF-8",
                    type: "get",
                    dataType: "text",
                    beforeSend: function () {
                        layer.load(1, { //icon支持传入0-2
                            content: '删除中',
                            success: function (layero) {
                                layero.find('.layui-layer-content').css({
                                    'padding-top': '39px',
                                    'width': '60px'
                                });
                            }
                        });
                    },
                    complete: function () {
                        layer.closeAll('loading');
                    },
                    success: function (data) {
                        layer.msg('删除成功', {
                            time: 1000,
                            icon: 1,
                            offset: '150px'
                        }, function () {
                            location.reload();
                        });
                    },error:function () {
                        layer.msg('系统异常');
                    }
                });
            },openimg:function (image) {
                layer.open({
                    type: 1,
                    title:"主图",
                    area: ['auto'],
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true, //开启遮罩关闭
                    end: function (index, layero) {
                        return false;
                    },
                    content: '<div style="text-align:center"><img style="width:500px" src="' + image + '" /></div>'
                });
            }
        }
    });
    layui.use(['form', 'element', 'util','laypage', 'layer'], function () {
        var element = layui.element;
        var util = layui.util;
        var form = layui.form
            , layer = layui.layer
            , laypage = layui.laypage;
        layer.photos({
            photos: '#layer-photos-demo'
            , anim: 5
        });
        //完整功能
        laypage.render({
            elem: 'demo7'
            ,count: shopcount
            ,limit: 12
            ,limits:[12,24,36,48]
            ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            ,jump: function(obj){
                loolshopbypage(obj.curr, obj.limit);
            }
        });
    });
</script>
</html>